<template>
  <div class="content">
      <div class="container">
             <p><span></span>确认订单</p>
      <div class="user">
          <div class="left">
              <span></span>
              <span>xxx</span>
              <span>13254855487</span>
          </div>
          <div class="right">
              <span>修改&gt;</span>
          </div>
      </div>
      <div class="address">
          <div class="left">
              <span></span>
              <div class="addre">
                  <span>自提点:xxxxxxx</span>
                  <span>xxxxxxxxxxxxxx</span>
              </div>
          </div>
          <div class="right">
              <span>切换&gt;</span>
          </div>
      </div>

      <div class="time">
           <span></span>
           <span>03月13日</span>
           <span>16:00自提</span>
      </div>

      <div class="goods">
          <div class="left">
              <div class="img">
                <img src="5.png" alt="">
              </div>
              <div class="info">
                  <h4>[发单罐]冠虎维生素强化饮料250ml/罐</h4>
                  <span>限购一件</span>
                  <i>$0.1</i>
                  
              </div>
          </div>
          <div class="right">
              <span>-</span>
              <i>1</i>
              <span>+</span>
          </div>
      </div>

      <div class="pay">
          <ul>
              <li><img src=""><span>微信支付</span><input type="radio" name="pay"></li>
              <li><img src=""><span>支付宝(可安全免密支付)</span><input type="radio" name="pay"></li>
              <li><img src=""><span>找微信好友支付</span><input type="radio" name="pay"></li>
          </ul>
      </div>
      </div>
        <div class="bot">
            <p>实付款<span>$4.69</span><i>免运费</i></p>
            <p>立即支付</p>
        </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .content{
        display: flex;
    }
    .container{
        flex: 1;
        padding:0 0.1rem;
        box-sizing: border-box;
    }
    .user{
        display: flex;
        justify-content: space-between;
        height: 0.5rem;
        line-height: 0.5rem;
    }
    .address{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 0.85rem;
    }
    .address .left .addre{
        display: flex;
        flex-direction: column;
    }
    .goods{
       display: flex;
        justify-content: space-between; 
        height: 1.35rem;
        border-bottom: 0.1rem solid #f4f4f4;
    }
    .goods .left{
        display: flex;
    }
    .time{
        height: 0.5rem;
        line-height: 0.5rem;
    }
    .pay ul li{
        height: 0.55rem;
        line-height: 0.55rem;
        border-bottom: 0.01rem solid #f4f4f4;
    }
    .bot{
        display: flex;
        height: 0.7rem;
    }
    .bot p:first-of-type{
        flex:1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding:0 0.1rem 0.1rem 0;
        box-sizing: border-box;
        font-weight: 500;
    }
    .bot p:first-of-type span{
        font-size: 0.18rem;
        color:#dd2f23 ;
        margin:0 0.05rem;
    }
    .bot p:first-of-type i{
        font-size: 0.14rem;
        color:#dd2f23;
    }
    .bot p:last-of-type{
        width:1.8rem;
        background-color: #dd2f23;
        font-size: 0.2rem;
        text-align: center;
        line-height: 0.7rem;
        color:white;
    }
</style>